<template>
    <view class="container">
		<!-- 搜索框区域 -->
        <view class="search-box">
            <input type="text" placeholder="请输入搜索内容" v-model="searchText" class="search-input" />
            <button class="search-btn" @click="handleSearch">搜索</button>
        </view>
        <!-- 轮播图区域 -->
        <swiper class="swiper-container" :indicator-dots="true" :circular="true" :autoplay="true" :interval="3000" :duration="1000">
                <swiper-item v-for="(item, index) in bannerList" :key="index">
                    <image :src="item" class="swiper-image" mode="aspectFill"></image>
                </swiper-item>
            </swiper>
		<!-- 旅游攻略 -->
		<!-- 横向滑动容器 -->
    <view class="guide-list-container">
      <view class="guide-item" v-for="(guide, index) in guides" :key="index">
        <image :src="guide.image" class="guide-image" mode="aspectFill"></image>
        <view class="guide-content">
          <view class="guide-title">{{ guide.title }}</view>
          <view class="guide-description">{{ guide.description }}</view>
        </view>
      </view>
    </view>
        <!-- 瀑布流 -->
        <view
            :id="`cont_${index + 1}`"
            class="cont-box"
            :style="{ width: widthCalc, 'margin-left': index === 0? 0 : marginCalc }"
            v-for="(numVal, index) in flowData.column"
            :key="numVal"
        >
            <view class="item-box" v-for="(item, j) in flowData[`column_${index + 1}`]" :key="j">
                <image class="img-tip" :src="item.imgUrl" mode="widthFix" lazy-load @load="imgLoad(item)" @error="imgError(item)" />
                <view class="tit-tip multi-line-omit">{{ item.title }}</view>
                <view class="desc-tip multi-line-omit">{{ item.desc }}</view>
            </view>
        </view>
    </view>
</template>

<script setup>
	
	import indexApi from "@/api/you_wan.js"
import { reactive, computed, onMounted, ref } from "vue";


// 定义searchText变量，用于存储搜索框输入的内容
const searchText = ref('');
// 搜索按钮点击事件处理函数，这里先简单打印输入的内容，实际可替换为真正的搜索逻辑，比如发起接口请求等
const handleSearch = () => {
    console.log('你输入的搜索内容是：', searchText.value);
};


// 模拟的轮播图数据
const bannerList = ref([]);
//旅游攻略
const guides = ref([
 {	 id:1,
     image: 'https://img0.baidu.com/it/u=2274771109,760212698&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
     title: '扎龙自然旅游区',
     description: '黑龙江扎龙国家级自然保护区，是我国以鹤类等大型水禽为主的珍稀水禽分布区，是世界上最大的丹顶鹤繁殖地。'
   },
   { id:2,
     image: 'https://img1.baidu.com/it/u=1818053762,3134986404&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375',
     title: '鹤城公园',
     description: '齐齐哈尔鹤城欢乐世界，是黑龙江省新评4A级旅游景区，景点级别AAAA级。'
   },
   { id:3,
     image: 'https://img0.baidu.com/it/u=959477933,1948487974&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666',
     title: '明月岛',
     description: '明月岛，江心绿洲，古建瑰宝，四季风光如画，集儿童火车游、江景游览、冰雪活动于一体的休闲胜地。'
   },
   { id:4,
     image: 'https://img0.baidu.com/it/u=2274771109,760212698&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
     title: '扎龙自然旅游区',
     description: '扎龙自然旅游区'
   },
   { id:5,
     image: 'https://img1.baidu.com/it/u=1818053762,3134986404&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375',
     title: '鹤城公园',
     description: '齐齐哈尔鹤城欢乐世界，是黑龙江省新评4A级旅游景区，景点级别AAAA级。'
   },
   { id:6,
     image: 'https://img0.baidu.com/it/u=959477933,1948487974&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666',
     title: '明月岛',
     description: '明月岛，江心绿洲，古建瑰宝，四季风光如画，集儿童火车游、江景游览、冰雪活动于一体的休闲胜地。'
   },
]);
  // 可以继续添加更多景点数据
  
  //

// 用于控制节流的定时器变量
let timer = null;

// 响应式数据flowData，用于管理瀑布流相关信息
const flowData = reactive({
    list: [], // 存储所有要展示的瀑布流数据项
	imgList: [],
    column: 2, // 瀑布流的列数
    columnSpace: 2, // 瀑布流列与列之间的间距
    page: 1, // 当前页码，用于分页加载，初始化为1
    pageSize: 9, // 每页显示的数据条数，可根据实际情况调整
    total: 9 // 数据总条数，后续可通过接口获取或者根据初始数据长度确定等方式赋值
});

// 数据赋值，这里是模拟的数据，实际可替换为从接口获取的数据
flowData.list = [
    {
        imgUrl: "https://img0.baidu.com/it/u=2274771109,760212698&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
        title: "扎龙自然旅游区",
        desc: "黑龙江扎龙国家级自然保护区，是我国以鹤类等大型水禽为主的珍稀水禽分布区，是世界上最大的丹顶鹤繁殖地。"
    },
    {
        imgUrl: "https://img1.baidu.com/it/u=1818053762,3134986404&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375",
        title: "鹤城公园",
        desc: "齐齐哈尔鹤城欢乐世界，是黑龙江省新评4A级旅游景区，景点级别AAAA级。"
    },
    {
        imgUrl: "https://img0.baidu.com/it/u=959477933,1948487974&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666",
        title: "明月岛",
        desc: "明月岛，江心绿洲，古建瑰宝，四季风光如画，集儿童火车游、江景游览、冰雪活动于一体的休闲胜地。"
    },
    {
        imgUrl: "https://img0.baidu.com/it/u=2274771109,760212698&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
        title: "扎龙自然旅游区",
        desc: "黑龙江扎龙国家级自然保护区，是我国以鹤类等大型水禽为主的珍稀水禽分布区，是世界上最大的丹顶鹤繁殖地。"
    },
    {
        imgUrl: "https://img1.baidu.com/it/u=1818053762,3134986404&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375",
        title: "鹤城公园",
        desc: "齐齐哈尔鹤城欢乐世界，是黑龙江省新评4A级旅游景区，景点级别AAAA级。"
    },
    {
        imgUrl: "https://img0.baidu.com/it/u=959477933,1948487974&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666",
        title: "明月岛",
        desc: "明月岛，江心绿洲，古建瑰宝，四季风光如画，集儿童火车游、江景游览、冰雪活动于一体的休闲胜地。"
    },
   {
       imgUrl: "https://img0.baidu.com/it/u=2274771109,760212698&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
       title: "扎龙自然旅游区",
       desc: "黑龙江扎龙国家级自然保护区，是我国以鹤类等大型水禽为主的珍稀水禽分布区，是世界上最大的丹顶鹤繁殖地。"
   },
   {
       imgUrl: "https://img1.baidu.com/it/u=1818053762,3134986404&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375",
       title: "鹤城公园",
       desc: "齐齐哈尔鹤城欢乐世界，是黑龙江省新评4A级旅游景区，景点级别AAAA级。"
   },
   {
       imgUrl: "https://img0.baidu.com/it/u=959477933,1948487974&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666",
       title: "明月岛",
       desc: "明月岛，江心绿洲，古建瑰宝，四季风光如画，集儿童火车游、江景游览、冰雪活动于一体的休闲胜地。"
   },
   
];

// 初始化每一列的数据，创建对应列数的空数组，用于存放各列的瀑布流数据项
for (let i = 1; i <= flowData.column; i++) {
    flowData[`column_${i}`] = [];
}


// 生命周期函数 - 实例被挂载后调用，开始初始化瀑布流数据，从第一页开始加载
onMounted(() => {
	   initValue();
	//获取轮播图
	indexApi.selectTourImg().then(res => {
		console.log(res.data);
		bannerList.value = res.data;
		 console.log(bannerList.value);
	}).catch(error => {
	    console.error('获取数据出现错误：', error);
	    // 可以在这里添加一些额外的逻辑，比如给用户显示提示信息等
	});
});

// 计算列宽的计算属性，根据列数和列间距计算每列的宽度占比
const widthCalc = computed(() => {
    return `${100 / flowData.column - flowData.columnSpace}%`;
});

//获取轮播图
// const selectTourImg = () => {
//     indexApi.selectTourImg().then(res => {
//         bannerList.value = res.data;
//     });
// };
// const selectTourImg = () => {
//     indexApi.selectTourImg().then(res => {
		
// 		cosnole.log('----------------------------------');
// 		console.log(res.data);
// 		console.log('----------------------------------');
//         // flowData.list = res.data;
// 		bannerList.value = res.data;
		
// 		console.log(bannerList.value);
//     });
// };

// 计算 margin 外边距的计算属性，根据列宽等信息计算列与列之间的外边距占比
const marginCalc = computed(() => {
    const columnWidth = 100 / flowData.column - flowData.columnSpace;
    return `${(100 - columnWidth.toFixed(5) * flowData.column) / (flowData.column - 1)}%`;
});

// 获取最小值的对象的函数，用于从给定数组中找到指定属性值最小的对象
const getMinObj = (arr, property) => {
    let minValue = arr[0][property];
    let minObj = arr[0];
    for (let i = arr.length - 1; i >= 0; i--) {
        if (arr[i][property] < minValue) {
            minValue = arr[i][property];
        }
    }
    minObj = arr.filter(item => item[property] === minValue);
    return minObj[0];
};

// 计算每列的高度的函数，通过uni.createSelectorQuery获取各列的高度信息，返回高度最小的列的相关信息
function getMinColumnHeight() {
    return new Promise(resolve => {
        const heightArr = [];
        for (let i = 1; i <= flowData.column; i++) {
            uni.createSelectorQuery()
              .select(`#cont_${i}`)
              .boundingClientRect(res => {
                    heightArr.push({ column: i, height: res.height });
                })
              .exec(() => {
                    if (flowData.column <= heightArr.length) {
                        resolve(getMinObj(heightArr, "height"));
                    }
                });
        }
    });
}

// 初始化瀑布流数据（支持分页加载），根据当前页码和页大小加载对应的数据到各列中
async function initValue() {
    const startIndex = (flowData.page - 1) * flowData.pageSize;
    const endIndex = startIndex + flowData.pageSize;
    const dataToLoad = flowData.list.slice(startIndex, endIndex);
    if (dataToLoad.length === 0) return false;

    for (let i = 0; i < dataToLoad.length; i++) {
        const item = dataToLoad[i];
        const minHeightRes = await getMinColumnHeight();
        flowData[`column_${minHeightRes.column}`].push({
          ...item,
            index: startIndex + i
        });
    }

    // 判断是否还有更多数据，如果当前加载的数据条数小于页大小，说明已经加载完所有数据了
    if (dataToLoad.length < flowData.pageSize) {
        return false;
    }

    // 如果还有数据，页码加1，准备加载下一页
    flowData.page++;
}



// 获取景点列表
// const getScenicList = () => {
//     uni.request({
//         url: 'https://api.apiopen.top/api/getTravelNotes',
//         method: 'GET',
// 		}

// 图片加载完成的处理函数，自定义节流逻辑，避免频繁触发加载下一条数据操作
function imgLoad(item) {
    const i = item.index;
    if (!timer) {
        initValue();
        // 设置定时器，在一定时间后清除，实现节流效果，这里设置300毫秒，可调整
        timer = setTimeout(() => {
            timer = null;
        }, 300);
    }
}

// 图片加载失败的处理函数，同样添加自定义节流逻辑
function imgError(item) {
    const i = item.index;
    if (!timer) {
        initValue();
        timer = setTimeout(() => {
            timer = null;
        }, 300);
    }
}

// 处理页面滚动事件，判断是否滚动到接近底部，若是则加载下一页数据
function handleScroll(e) {
    const scrollTop = e.detail.scrollTop;
    const scrollHeight = e.detail.scrollHeight;
    const clientHeight = e.detail.clientHeight;
    if (scrollTop + clientHeight >= scrollHeight - 0) { // 这里 -100 表示距离底部还有100像素时就加载下一页，可调整
        initValue();
    }
}
</script>




<style lang="scss" scoped>
	// 搜索框整体容器样式
	.search-box {
		height: 23px;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    padding: 10px;
	    background-color: #f5f8f8; // 背景，可根据喜好调整颜色
	    border-radius: 8px; // 圆角
	    box-shadow: 0 6px 4px rgba(0, 2, 2, 0.1); // 淡淡的阴影效果，增加立体感
	    margin-bottom: 2px; // 与轮播图之间添加一点间距，更美观
	}
	
	// 搜索输入框样式
	.search-input {
	    width: 95%; // 占据容器大部分宽度，可根据实际情况调整比例
	    padding: 8px;
	    font-size: 12px;
	    border: none;
	    border-radius: 4px;
	    outline: none; // 去除获得焦点时的边框轮廓
	}
	
	// 搜索按钮样式
	.search-btn {
		height: 23px;
		width: 50px;
	    padding: 2px 20px;
	    font-size: 12px;
	    border: none;
	    background-color: #19a3ff; // 蓝色按钮背景色，可更换喜欢的颜色
	    color: white; // 白色文字，与背景形成对比
	    border-radius: 4px;
	    cursor: pointer; // 鼠标悬停时显示手型光标
	    &:hover {
	        background-color: #0056b3; // 鼠标悬停时按钮背景色加深，增强交互反馈
	    }
		white-space: nowrap;
		display: flex; // 将按钮设置为flex容器
		align-items: center; // 垂直方向上居中对齐子元素（文字）
		justify-content: center; // 水平方向上居中对齐子元素（文字）
	}
	//整体
.container {
    padding: 0px;
}
//轮播图
.swiper-container {
    height: 200px;
    margin-bottom: 5px;

}

.swiper-image {
    width: 100%;
    height: 100%;

}
/* 横向滚动容器 */
.guide-list-container {
  display: flex;
  gap: 10px;
  overflow-x: auto;  /* 实现水平滚动 */
  padding-bottom: 10px;
  scroll-snap-type: x mandatory; /* 滚动时每个元素都会停留在视图内 */
}

/* 每个攻略项 */
.guide-item {
  flex-shrink: 0; /* 防止缩小 */
  width: 115px; /* 设置每个项的宽度 */
  height: 130px; /* 设置每个项的高度 */
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background-color: white;
  scroll-snap-align: start; /* 让每个项在滚动时停在视图的开始位置 */
}

/* 攻略项中的图片 */
.guide-image {
  width: 100%;
  height: 70px;
  object-fit: cover;
}

/* 攻略项内容 */
.guide-content {
  padding: 5px;
}

.guide-title {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 5px;
}

.guide-description {
  font-size: 11px;
  color: #555;
}

/* 滚动条样式 */
.guide-list-container::-webkit-scrollbar {
  height: 5px;  /* 横向滚动条的高度 */
}

.guide-list-container::-webkit-scrollbar-thumb {
  background-color: #aaa; /* 滚动条的颜色 */
  border-radius: 3px;
}

.guide-list-container::-webkit-scrollbar-track {
  background-color: #ffffff; /* 滚动条背景颜色 */
}


//瀑布流
.container {
    padding: 20rpx;
  .cont-box {
        $borderRadius: 12rpx;
        float: left;
      .item-box {
            width: 100%;
            padding-bottom: 20rpx;
            margin-bottom: 30rpx;
            border-radius: $borderRadius;
            box-shadow: 0rpx 3rpx 6rpx rgba(0, 46, 37, 0.08);
          .img-tip {
                width: 100%;
                border-radius: $borderRadius $borderRadius 0 0;
            }
          .tit-tip {
                text-align: justify;
                font-size: 30rpx;
                padding: 10rpx 20rpx 0;
                font-weight: 900;
            }
          .desc-tip {
                text-align: justify;
                font-size: 26rpx;
                padding: 5rpx 20rpx 0;
                margin-top: 10rpx;
            }
        }
    }
}

/* 多行省略 */
.multi-line-omit {
    word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
    text-overflow: ellipsis; // 溢出用省略号显示
    overflow: hidden; // 超出的文本隐藏
    display: -webkit-box; // 作为弹性伸缩盒子模型显示
    -webkit-line-clamp: 2; // 显示的行
    -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
}

/* 单行省略 */
.one-line-omit {
    width: 100%; // 宽度100%：1vw等于视口宽度的1%；1vh等于视口高度的1%
    white-space: nowrap; // 溢出不换行
    overflow: hidden; // 超出的文本隐藏
    text-overflow: ellipsis; // 溢出用省略号显示
}
</style>